<template>
  <!-- singer 歌手 页面 -->
  <div class="singer" ref="singer">
    <listview @select="selectSinger" :list="singerList" ref="list"></listview>
    <router-view></router-view>
  </div>
</template>
<script>
import { getSingerList } from 'api/singer';
import Listview from 'components/listview/listview';
import { mapMutations } from 'vuex';
import { playlistMixin } from 'common/js/mixin';

const HOT_NAME = '热门';
export default {
  mixins: [playlistMixin],
  data() {
    return {
      singerList: [],
    };
  },
  created() {
    this._getSingerList();
  },
  methods: {
    ...mapMutations(['setSinger']),
    handlePlaylist(playlisy) {
      const bottom = playlisy.length > 0 ? '60px' : '';
      this.$refs.singer.style.bottom = bottom;
      this.$refs.list.refresh();
    },
    selectSinger(singer) {
      // console.log('singer', singer);
      this.setSinger(singer);
      this.$router.push({ path: `/singer/${singer.id}` });
    },
    _getSingerList() {
      getSingerList().then((res) => {
        this.singerList = this._normalizeSinger(res);
      });
    },
    _normalizeSinger(obj) {
      let ret = [];
      let hot = [];
      for (let key in obj) {
        let val = obj[key];
        if (val.title.match(/[a-zA-Z]/)) {
          ret.push(val);
        } else if (val.title === HOT_NAME) {
          hot.push(val);
        }
      }
      ret.sort((a, b) => {
        return a.title.charCodeAt(0) - b.title.charCodeAt(0);
      });
      return hot.concat(ret);
    },
  },
  components: {
    Listview,
  },
};
</script>
<style scoped lang="stylus">
.singer
    position: fixed
    top: 88px
    bottom: 0
    width: 100%
</style>
